<template>
  <div class="form-container">
    <el-form :model="form" label-width="120px">
      <el-form-item label="设备通信协议">
        <el-select v-model="form.protocol" placeholder="选择协议">
          <el-option label="MQTT" value="mqtt" />
          <el-option label="HTTP" value="http" />
          <el-option label="COAP" value="coap" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备认证方式">
        <el-select v-model="form.authMethod" placeholder="选择认证方式">
          <el-option label="证书" value="certificate" />
          <el-option label="密钥" value="key" />
          <el-option label="双向认证" value="mutualAuth" />
        </el-select>
      </el-form-item>

      <el-form-item label="数据压缩格式">
        <el-select v-model="form.compression" placeholder="选择压缩格式">
          <el-option label="Gzip" value="gzip" />
          <el-option label="LZ4" value="lz4" />
        </el-select>
      </el-form-item>

      <el-form-item label="存储路径">
        <el-select v-model="form.storagePath" placeholder="选择存储路径">
          <el-option label="本地" value="local" />
          <el-option label="网络" value="network" />
        </el-select>
      </el-form-item>

      <el-form-item label="IP白名单">
        <el-button type="primary" @click="showIPModal">新增IP</el-button>
      </el-form-item>

      <el-form-item label="响应超时设置">
        <el-input-number v-model="form.timeout" :min="1" />
      </el-form-item>

      <el-form-item label="系统日志级别">
        <el-select v-model="form.logLevel" placeholder="选择日志级别">
          <el-option label="一般" value="info" />
          <el-option label="错误" value="error" />
          <el-option label="警告" value="warning" />
          <el-option label="调试" value="debug" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-dialog v-model="ipModalVisible" title="新增IP">
      <el-form :model="newIP" label-width="120px">
        <el-form-item label="IP地址">
          <el-input v-model="newIP.address" placeholder="请输入IP地址" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveIP">保存</el-button>
          <el-button @click="cancelIP">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const form = ref({
      protocol: "mqtt", // 默认值
      authMethod: "certificate", // 默认值
      compression: "gzip", // 默认值
      storagePath: "local", // 默认值
      timeout: 15,
      logLevel: "info" // 默认值
    });

    const ipModalVisible = ref(false);
    const newIP = ref({ address: "" });

    const showIPModal = () => {
      ipModalVisible.value = true;
    };

    const saveIP = () => {
      // 保存IP逻辑
      ElMessage.success("保存成功");
      ipModalVisible.value = false;
      newIP.value.address = ""; // 清空输入
    };

    const cancelIP = () => {
      ElMessage.info("已取消");
      ipModalVisible.value = false;
    };

    const submit = () => {
      // 提交表单逻辑
      console.log(form.value);
      ElMessage.success("提交成功");
    };

    const reset = () => {
      form.value = {
        protocol: "mqtt",
        authMethod: "certificate",
        compression: "gzip",
        storagePath: "local",
        timeout: 15,
        logLevel: "info"
      };
      ElMessage.info("已重置");
    };

    return {
      form,
      ipModalVisible,
      newIP,
      showIPModal,
      saveIP,
      cancelIP,
      submit,
      reset
    };
  }
};
</script>

<style scoped></style>
